<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-top: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        /**
         * 批量修改ele的属性
         * @param ele           dom元素
         * @param options   属性对象 {width:200,height:300,backgroundColor:'red'}
         */

        function setCss(ele, attr, value) {
            // 以下属性是带px单位的属性
            var reg = /(width|height|left|top|right|bottom|fontSize|lineHeight)|((margin|padding)|(Top|Bottom|Left|Right))/;
            if (reg.test(attr)) {
                // 如果正则成立，说明这些属性是需要px单位的属性
                if (!isNaN(value)) {// 条件成立，说明value是一个纯数字，那么需要加上px单位
                    value += 'px'
                }
            }
            ele.style[attr] = value;
        }

        // 封装一个判断数据类型的方法
        function testType(value, type) {
            var result = Object.prototype.toString.call(value).slice(8, -1);
            // [object Number]  slice(8,-1) ==> Number
            // [object String]  slice(8,-1) ==> String
            // [object Object]  slice(8,-1) ==> Object
            // [object Null]    slice(8,-1) ==> Null
            return result === type;
        }

        testType({}, 'Object');// true
        testType(14, 'Number');// true

        function setGroupCss(ele, options) {
            // 如何判断options必须是一个对象数据类型，并且还不能是null
            if (testType(options, 'Object')) {// options必然是一个对象
                for (var attr in options) {// for in 循环可以遍历到私有的属性，也可以遍历到继承来的属性，所以需要判断一下

                    // 判断attr是否是私有属性
                    if (options.hasOwnProperty(attr)) {
                        // 属性名 attr   属性值 options[attr]
                        setCss(ele, attr, options[attr]);
                    }
                }
            }
        }

        var oBox = document.getElementById('box');

        setGroupCss(oBox, { width: 200, height: 300, backgroundColor: 'red',opacity:0.1 });
    </script>
</body>

</html>